<template>
  <div class="flex h-100%">
    <div class="tableBox " v-for="(col, index) in columns" :key="index">
      <pb-table border :column="ratioColumn" :tableData="col" :indexWidth="62" height="620">
        <template #ratio="{ row }">
          <div class="flex items-center">
            <pb-input v-model.number="row.roiMin" type="number" :max="100" width="100px" @blur="setMinRatio(row)" />
            -
            <pb-input v-model.number="row.roiMax" type="number" :max="100" width="100px" @blur="setMaxRatio(row)" />
          </div>
        </template>
      </pb-table>
    </div>

  </div>
</template>

<script setup lang="ts">
import { getParamsRatio, setRatio } from '@/api/Recipe'
import { createMessage } from '@/Public-UIlibrary/pb-message/method'
const ratioColumn = reactive([
  {
    key: "tenantName",
    width: 155,
    name: "食堂名称",
  },
  {
    slot: "ratio",
    width: 190,
    name: "投入产出比设置（%）",
  },
])

const ratioData = ref([])

const getParamsRatioApi = () => {
  return new Promise<void>((resolve, reject) => {
    getParamsRatio({ currentPage: 1, pageSize: -1 }).then(res => {
      if (res.code == 2000) {
        ratioData.value = res.data.records
      }
    })
  })
}

const columns = computed(() => {
  const data = ratioData.value
  const len = data.length
  const cols = []

  if (len <= 30) {
    // 计算需要显示的列数（最多3列）
    const columnCount = Math.min(Math.ceil(len / 10), 3)
    for (let i = 0; i < columnCount; i++) {
      const start = i * 10
      const end = start + 10
      cols.push(data.slice(start, end))
    }
  } else {
    // 均分到3列
    const columnCount = 3
    const baseItems = Math.floor(len / columnCount)
    let remainder = len % columnCount
    let start = 0

    for (let i = 0; i < columnCount; i++) {
      const itemCount = baseItems + (remainder-- > 0 ? 1 : 0)
      const end = start + itemCount
      cols.push(data.slice(start, end))
      start = end
    }
  }

  return cols
})





const setMinRatio = (row) => {
  if (!row.roiMin) {
    row.roiMin = 1
  } else if (row.roiMin > row.roiMax || row.roiMin == row.roiMax) {
    createMessage({
      type: 'info',
      message: `最小值不能大于等于${row.roiMax}`
    })
    row.roiMin = 1
  } else if (row.roiMin < 1 || row.roiMin > 100) {
    createMessage({
      type: 'info',
      message: `投产比区间应在[1-100]之间`
    })
    row.roiMin = 1
  }
  row.roiMin = parseFloat(row.roiMin.toFixed(2));
  let { tenantId, roiMin, roiMax } = row
  setRatio({ tenantId, roiMin, roiMax }).then(res => {
    if (res.code == 2000) {
      // createMessage({
      //   type: 'success',
      //   message: `保存成功`
      // })
    }
  })
}

const setMaxRatio = (row) => {
  if (!row.roiMax) {
    row.roiMax = 100
  } else if (row.roiMin > row.roiMax || row.roiMin == row.roiMax) {
    createMessage({
      type: 'info',
      message: `最大值不能小于等于${row.roiMin}`
    })
    row.roiMax = 100
  } else if (row.roiMax < 1 || row.roiMax > 100) {
    createMessage({
      type: 'info',
      message: `投产比区间应在[1-100]之间`
    })
    row.roiMax = 100
  }
  row.roiMax = parseFloat(row.roiMax.toFixed(2));
  let { tenantId, roiMin, roiMax } = row
  setRatio({ tenantId, roiMin, roiMax }).then(res => {
    if (res.code == 2000) {
      // createMessage({
      //   type: 'success',
      //   message: `保存成功`
      // })
    }
    })
}


onMounted(() => {
  getParamsRatioApi()
})
</script>

<style lang="scss" scoped>
.tableBox {
  width: 32%;

  &:nth-child(2) {
    margin: 0 40px;
  }
}
</style>